<template>
  <Panel title="突发类事件" class="event-sudden" v-bind="$attrs">
    <!-- 统计部分 -->
    <div class="event-sudden-detail">
      <div class="sudden-total">
        <div class="icon"></div>
        <div class="sum">
          <span>总计</span>
          <span class="number">{{ eventStatistical.emergencyEventTotal }}</span>
        </div>
      </div>

      <div class="event-sudden-type">
        <div class="type-total accident">
          <span class="icon"></span><span class="name">事故灾害</span>
          <span class="number">{{ eventStatistical.trafficEventCount }}</span>
        </div>
        <div class="type-total bad-weather">
          <span class="icon"></span><span class="name">恶劣天气</span>
          <span class="number">{{ eventStatistical.badWeatherCount }}</span>
        </div>
        <div class="type-total disasters">
          <span class="icon"></span><span class="name">地质灾害</span>
          <span class="number">{{ eventStatistical.geologicHazardCount }}</span>
        </div>
        <div class="type-total rescue">
          <span class="icon"></span><span class="name">清障救援</span>
          <span class="number">{{ eventStatistical.rescueCount }}</span>
        </div>
      </div>
    </div>

    <!-- 折线图部分 -->
    <div class="line-chart">
      <LineChart :seriesData="seriesData" :title="title" :xDate="xDate" />
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'EventSudden'
}
</script>
<script setup>
/**
 * 突发类事件(二级)
 * @author 阳坤（1194636148@qq.com）
 * @date   时间：2022/10/24
 */

import Panel from '../../components/panel'
import LineChart from '../../components/charts/ShadowLine.vue'
import eventApi from '../../api/event.js'
import { ref, onMounted } from 'vue'

// 事件统计
const eventStatistical = ref({})

// 折线图数据
const title = ref('近7日走势')
const xDate = ref()
const seriesData = ref([
  {
    name: '事故灾害',
    color: '#F34F29',
    data: []
  },
  {
    name: '恶劣天气',
    color: '#06AED4',
    data: []
  },
  {
    name: '地质灾害',
    color: '#A5866C',
    data: []
  },
  {
    name: '清障救援',
    color: '#F7952F',
    data: []
  }
])

onMounted(() => {
  init()
})

/**
 * 初始化
 */
const init = () => {
  getData()
}

/**
 * 获取数据
 */
const getData = () => {
  const params = {
    province: '32',
    city: '',
    roadType: 2
  }
  eventApi
    .getSuddenPlanStatistic(params)
    .then(res => {
      if (res.data) {
        // 事件数量统计
        eventStatistical.value = res.data
        // 时间轴
        xDate.value = res.data.dataList
        // 折线数据
        seriesData.value[0].data = res.data.trafficEventList
        seriesData.value[1].data = res.data.badWeatherList
        seriesData.value[2].data = res.data.geologicHazardList
        seriesData.value[3].data = res.data.rescueList
      }
    })
    .catch(() => {
      message.error(`数据获取失败！`)
    })
}
</script>

<style scoped lang="less">
.event-sudden {
  &-detail {
    display: flex;
    justify-content: space-between;
    height: 23%;
    margin: 10px 0;

    .sudden-total {
      display: flex;

      align-items: center;

      .icon {
        width: 66px;
        height: 44px;
        margin-top: 5px;
        background: url('../../assets/images/event/event-sudden.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 5px;
      }

      .sum {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 600;
        color: #333333;
      }

      .number {
        color: #fe3636;
        font-size: 36px;
        font-weight: 700;
        line-height: 24px;
        margin-top: 2px;
      }
    }

    .event-sudden-type {
      display: flex;
      flex-wrap: wrap;
      width: 60%;
      justify-content: space-between;
      align-content: space-between;

      margin-right: 20px;

      .type-total {
        width: 48%;
        height: 23px;

        display: flex;
        align-items: center;
        background: rgba(243, 79, 41, 0);
        border-radius: 14px;
        padding: 2px 13px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #333333;

        .icon {
          width: 5px;
          height: 5px;
          border-radius: 50% 50%;
        }

        .name {
          margin: 0 11px 0 5px;
        }

        .number {
          font-size: 20px;
          font-weight: 700;
          flex: 1;
          line-height: 22px;
          text-align: right;
          padding-top: 2px;
        }
      }

      .accident {
        box-shadow: inset 0 0 8px #f34f2999;

        .icon {
          background: #f34f29;
        }

        .number {
          color: #f34f29;
        }
      }

      .bad-weather {
        box-shadow: inset 0 0 8px #06aed4a6;

        .number {
          color: #06aed4;
        }

        .icon {
          background: #06aed4;
        }
      }

      .disasters {
        box-shadow: inset 0 0 8px #a5866ca3;

        .number {
          color: #a5866c;
        }

        .icon {
          background: #a5866c;
        }
      }

      .rescue {
        box-shadow: inset 0 0 8px #f7952f9c;

        .number {
          color: #f7952f;
        }

        .icon {
          background: #f7952f;
        }
      }
    }
  }

  .line-chart {
    flex: 1;
  }
}
</style>
